<template>
	<tm-fullView>
		<tm-menubars title="输入框" color="bg-gradient-primary-lighten"  :showback="true"></tm-menubars>
		<tm-sheet :shadow="24"> 
			<view class="text-size-s text-weight-b mb-24 ">基本输入框,带聚焦</view>
			<tm-input focusShow ></tm-input>
			<tm-input focusShow :border-bottom="false" :vertical="true" title="输入你的名称" border-color="grey-lighten-3"></tm-input>
			
		</tm-sheet>
		<tm-input focusShow :vertical="true" :height="120" title="意见" :maxlength="512"  :border-bottom="false" :required="true" placeholder="请输入你的意见."  input-type="textarea" v-model="val_1" bg-color="grey-lighten-5" clear></tm-input>
		<tm-input :border-bottom="false" bg-color="grey-lighten-5" title="你的名称" border-color="grey-lighten-3"></tm-input>
		<tm-input prefixp-text="你的名称"  :border-bottom="false"  bg-color="grey-lighten-5"   border-color="grey-lighten-3"></tm-input>
		<tm-input prefixp-text="https://"  placeholder="请输入网址" :border-bottom="false" :round="24"  bg-color="grey-lighten-5"   border-color="grey-lighten-3"></tm-input>
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b mb-24">上下</view>
			
			<tm-input bg-color="grey-lighten-5" :border-bottom="false"  title-class="text-size-n text-weight-b text-primary" title="请输入金额" prefixp-icon="icon-lock" suffix="元" :vertical="true" placeholder="请输入产品价格"></tm-input>
			<tm-input bg-color="grey-lighten-5" :border-bottom="false" input-type="number" required :round="0" title-class="text-size-n text-weight-b text-primary" title="输入手机号码"  :vertical="true" placeholder="请输入数字类型手机号码">
				<template v-slot:default="{title}">
					{{title}}<text class="text-red">（必填项）</text>
				</template>
				<template v-slot:rightBtn>
					<view>
						<tm-button theme="bg-gradient-blue-accent" @click="$refs.daojishi.start()" :round="0" :font-size="24"  :height="74" block :width="110">
							<tm-countdown ref="daojishi" :autoStart="false" :time="60*1000">
								<template v-slot:default="{timeData}">
									{{!timeData.finish?'剩'+timeData.data.seconds+'秒':'验证码'}}
								</template>
							</tm-countdown>
						</tm-button>
					</view>
				</template>
			</tm-input>
		
		</tm-sheet>
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b mb-24">必填、校验项。去除背景，右对齐</view>
			
			<tm-input  :required="true"  title="金额" v-model="val_1"    placeholder="请输入产品价格" align="right"></tm-input>
			<tm-pickersDate @confirm="dateChange" :default-value="val_2" end="2021-12-31">
				<view class="fulled">
					<tm-input :required="true" :disabled="true" title="日期"  v-model="val_2"   right-icon="icon-angle-right"  placeholder="请输入产品价格" align="right"></tm-input>
				</view>
			</tm-pickersDate>
		
		</tm-sheet>
		<tm-sheet color="blue" :shadow="24">
			<view class="text-size-s text-weight-b mb-24">个性化输入框</view>
			
			<tm-sheet :margin="[0,0]" :padding="[0,0]" classname="overflow" :shadow="24">
				<tm-input  clear :required="true"  title="金额" v-model="val_1"    placeholder="请输入产品价格" align="right"></tm-input>
				<tm-pickersDate @confirm="dateChange" :default-value="val_2" end="2021-12-31">
					<view class="fulled">
						<tm-input  :required="true" :disabled="true" title="日期"  v-model="val_2"   right-icon="icon-angle-right"  placeholder="请输入产品价格" align="right"></tm-input>
						
					</view>
				</tm-pickersDate>
				
			</tm-sheet>
		
		</tm-sheet>
		<tm-sheet :shadow="24">
			<view class="text-size-s text-weight-b mb-24">个性化输入框</view>
			<view class="mb-32">
				<tm-input :fllowTheme="false" title="汽车价格" align="right" suffix="元" :border-bottom="false" :bg-round="24" :bg-shadow="24" :round="0"  color="grey" left-icon="icon-lock"></tm-input>
			</view>
			<view>
				<tm-input :fllowTheme="false" title="配置名称" align="right" :border-bottom="false" :bg-round="24" :bg-shadow="24" :round="0"  color="grey" left-icon="icon-lock"></tm-input>			
			</view>
		</tm-sheet>
		<tm-sheet color="grey-darken-2"  :shadow="24">
			<view class="text-size-s text-weight-b mb-24 ">更多个性化</view>
			<tm-input text-color="white" title-class="text-white"  bg-theme="" :required="true"    title="金额" v-model="val_1"    placeholder="请输入产品价格" align="right"></tm-input>
			<tm-input text-color="white" title-class="text-white" bg-theme=""     title="日期"  v-model="val_2"    placeholder="请输入产品价格" align="right"></tm-input>
		</tm-sheet>
		<view style="height:100rpx"></view>
	</tm-fullView>
 
</template>

<script>
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmInput from "@/tm-vuetify/components/tm-input/tm-input.vue"
	import tmPickersDate from "@/tm-vuetify/components/tm-pickersDate/tm-pickersDate.vue"
	import tmButton from "@/tm-vuetify/components/tm-button/tm-button.vue"
	import tmCountdown from "@/tm-vuetify/components/tm-countdown/tm-countdown.vue"
	export default {
		components:{tmFullView,tmMenubars,tmSheet,tmInput,tmPickersDate,tmButton,tmCountdown},
		data() {
			return {
				val_1:'',
				
				val_2:'2021-8-24',
			}
		},
		methods: {
			dateChange(e){
				this.val_2 = e.year + '-' + e.month + '-' + e.day;
			},
		}
	}
</script>

<style>

</style>
